<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后代选择器</title>
    <style>
        /* 语法  
      选择器1 选择器2{}

      选择器 2 需要在选择器 1 的内部才可以生效
      儿子，孙子，子子孙孙都是可以的
      */
        /* div内部的 span */
        
        div span {
            background-color: skyblue;
        }
        /* div 里面的 .last */
        
        div .last {
            color: yellowgreen;
        }
    </style>
</head>

<body>
    <span> span 标签</span>
    <div>
        <span>这是 div 的儿子 span</span>
    </div>
    <div>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error qui omnis odit iste, maiores delectus ut voluptas? Nesciunt, fugiat. Quia, tempore nam voluptate ad <span>ipsam</span> illo sequi in ratione quae.
        </p>
    </div>
    <div>
        <span class="last">这是 p 的儿子 span</span>
    </div>
</body>

</html>